<template>
  <el-card class="personal-msg">
    <div slot="header">
      <span>管理员信息</span>
    </div>
    <div class="conr=tent">
      <span>管理员ID:{{ userInfo.id }}</span>
      <el-divider></el-divider>
      <span>账号：{{ userInfo.account }}</span>
      <el-divider></el-divider>
      <span>用户组：{{ userInfo.userGroup }}</span>
      <el-divider></el-divider>
      <span>创建时间:{{ userInfo.ctime | filterDate}}</span>
      <el-divider></el-divider>
      <span
        >管理员图像：<el-divider></el-divider>
        <el-upload
          class="avatar-uploader"
          :action="'http://127.0.0.1:5000/users/avatar_upload'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="userInfo.imgUrl"
            :src="userInfo.imgUrl"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload
      ></span>
      <el-button type="primary" size="small" @click="handleUpdateAvatar">修改图片</el-button>
      <el-divider></el-divider>
      
    </div>
  </el-card>
</template>

<script>
//引入工具函数  时间格式 批量删除
import { formaDate } from "../../utils/verification";
import local from '../../utils/local'
//引入ajax
import { usersAvataredit  } from "../../api/user";
export default {
  data() {
    return {
      imgUrl:'',
      //服务器地址
      // API: "http://127.0.0.1:5000",
      //用户信息
      userInfo: {
        account: "小貂蝉",
        ctime: "2021-12-29T09:50:01.000Z",
        id: 80,
        imgUrl: "imgUrl",
        userGroup: "超级管理员",
      },
    };
    
  },
 
 
  //方法
  methods: {
     //修改图像
  async handleUpdateAvatar(){
    
          const res= await usersAvataredit({imgUrl:this.userInfo.imgUrl})
          console.log(res,'hhhh')
          //解构数据
          let {code,msg} = res.data
          if(code===0){
            this.$message({
              type:'success',
              message:msg
            })
          }else{
            this.$message.error(msg)
          }
          //告诉头部  图像修改好了
          this.$bus.$emit('upDate')
    
    },
    //上传成功，后端响应数据，接收后端响应的数据
    handleAvatarSuccess(res, file) {
      // console.log(res);
     
      let {code,msg,imgUrl} = res
      if(code===0){
        this.$message({
          type:'success',
          message:msg
        })
        

        //新图片名字
        this.newImgName = imgUrl
      }
      //回填图像
        this.userInfo.imgUrl=imgUrl
     
    },


    //图像上传之前触发 限制图片格式大小
    beforeAvatarUpload(file) {
      //如果文件的后缀是jpeg  isJPG就是true 否则就是false
      const isJPG = file.type === "image/jpeg";
      //如果文件小于2M isLt2m就是true 否则就是false
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      //两者都满足才能上传成功
      return isJPG && isLt2M;
    },

   
  },
  //过滤器  date指的是scope.row.ctime 传入过滤器 调用工具函数的操作 将其变成合适的时间格式
  filters: {
    filterDate(date) {
      console.log(date, "555");
      return formaDate(date);
    },
  },
  //生命周期 创建后
  created() {
    //取出本地数据
    // this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    this.userInfo = local.get('userInfo')
    
  },
};
</script>

<style lang="less" scoped>
.personal-msg {
  background: #fff;
  padding: 10px;
}
//图像上传样式
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>